---
name: usePagination
route: /usePagination
menu: 'UI'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';

# usePagination

Hook for common asynchronous paging scenario.

## Examples

### Default usage

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Default usage' description='Simple paged list'>
  <Demo1 />
</JackBox>

### Using deps properly

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Using deps properly' description='When deps changes, the page number will be reset'>
  <Demo2 />
</JackBox>

## API

```javascript
const result: ReturnValue<Item> = usePagination<Result, Item>(
  asyncFn: ({current, pageSize}) => Promise<Result>,
  options?: Options,
);

const result: ReturnValue<Item> = usePagination<Result, Item>(
  asyncFn: ({current, pageSize}) => Promise<Result>,
  deps?: any[],
  options?: Options,
);
```

### Result

| Property                  | Description                      | Type                                      |
|---------------------------|----------------------------------|-------------------------------------------|
| data                      | Data list                        | Item[]                                    |
| loading                   | Whether the data is loading      | boolean                                   |
| pagination.current        | Current page number              | number                                    |
| pagination.pageSize       | Current page size                | number                                    |
| pagination.total          | Total amount of data             | number                                    |
| pagination.totalPage      | Total pages                      | number                                    |
| pagination.onChange       | Modify both current and pageSize | (current: number, pageSize: number)=>void |
| pagination.changeCurrent  | Change current                   | (current: number)=>void                   |
| pagination.changePageSize | Change pageSize                  | (pageSize: number)=>void                  |
| refresh                   | Refresh data                     | () => void                                |

### Params

| Property | Description                                                                      | Type                           | Default |
|----------|----------------------------------------------------------------------------------|--------------------------------|---------|
| asyncFn  | Asynchronous request data function, function parameters are current and pageSize | ({current, pageSize})=>Promise | -       |
| deps     | Depends array, if deps change, it will reset current and trigger asyncFn         | any[]                          | []      |
| options  | Optional configuration items, see Options                                        | -                              | -       |


### Options

| Property        | Description                                                                                                           | Type                           | Default |
|-----------------|-----------------------------------------------------------------------------------------------------------------------|--------------------------------|---------|
| defaultPageSize | default page size                                                                                                     | number                         | 10      |
| formatResult    | Format the asyncFn return data. If the asyncFn return data meets the requirements, then this parameter is not needed. | (res: Result)=>({total, data}) | -       |